<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { ResponseP2PCall } from '../utils/P2PCall'
import { ApplyCallUser, LoginUser, RemoteUser } from '../utils/IpcData'
import { delay } from '../utils/tool'
import callAudio from '../assets/p2pCall.mp3'
import handoutAudio from '../assets/handoutClose.mp3'

const callAudioPlayer = ref<HTMLAudioElement | null>(null)
const handoutAudioPlayer = ref<HTMLAudioElement | null>(null)
const store = useStore()
const curNickname = computed(() => store.getters.getNotifyNickname)
const curAvatar = computed(() => store.getters.getNotifyAvatar)
const notifyType = computed(() => store.getters.getNotifyType)

onMounted(() => {
  setTimeout(() => {
    window.electron.ipcRenderer.send('initVuex')
  }, 200)
})

window.electron.ipcRenderer.on('initVuex', (_, args) => {
  console.log('初始化callNotify:', args)
  const loginUser: LoginUser = args[0]
  const applyCallUser: ApplyCallUser = args[1]

  store.commit('SET_USER_ID', loginUser.userId)
  store.commit('SET_NICKNAME', loginUser.nickname)
  store.commit('SET_AVATAR', loginUser.avatar)
  store.commit('SET_NOTIFY_USER_ID', applyCallUser.userId)
  store.commit('SET_NOTIFY_NICKNAME', applyCallUser.nickname)
  store.commit('SET_NOTIFY_AVATAR', applyCallUser.avatar)
  store.commit('SET_NOTIFY_TYPE', applyCallUser.callType)

  if (callAudioPlayer.value && handoutAudioPlayer.value) {
    callAudioPlayer.value.play()
  }

  // 开始计时，如果两分钟未答应。则消除窗口
  delay(120000).then(() => {
    if (callAudioPlayer.value && handoutAudioPlayer.value) {
      callAudioPlayer.value.pause()
      handoutAudioPlayer.value.play()
    }

    setTimeout(() => {
      window.electron.ipcRenderer.send('response-call', [
        new ResponseP2PCall(
          store.getters.getUserId,
          store.getters.getNotifyUserId,
          false,
          '对方拒绝接听'
        )
      ])
      store.commit('FLUSH_ALL_NOTIFY_DATA')
    }, 1000)
  })
})

const acceptCall = () => {
  if (callAudioPlayer.value && handoutAudioPlayer.value) {
    callAudioPlayer.value.pause()
  }

  setTimeout(() => {
    window.electron.ipcRenderer.send('response-call', [
      new ResponseP2PCall(store.getters.getUserId, store.getters.getNotifyUserId, true, ''),
      new LoginUser(
        store.getters.getUserId,
        store.getters.getUserNickname,
        store.getters.getUserAvatar
      ),
      new RemoteUser(
        store.getters.getNotifyUserId,
        store.getters.getNotifyNickname,
        store.getters.getNotifyAvatar,
        false,
        store.getters.getNotifyType
      )
    ])
    store.commit('FLUSH_ALL_NOTIFY_DATA')
  }, 1000)
}

const refuseCall = () => {
  if (callAudioPlayer.value && handoutAudioPlayer.value) {
    callAudioPlayer.value.pause()
    handoutAudioPlayer.value.play()
  }

  setTimeout(() => {
    window.electron.ipcRenderer.send('response-call', [
      new ResponseP2PCall(
        store.getters.getUserId,
        store.getters.getNotifyUserId,
        false,
        '对方拒绝接听'
      )
    ])
    store.commit('FLUSH_ALL_NOTIFY_DATA')
  }, 1000)
}
</script>

<template>
  <div class="w-full flex justify-center items-center gap-5 overflow-hidden" style="height: 100vh">
    <audio ref="callAudioPlayer" class="w-0 h-0" :src="callAudio"></audio>
    <audio ref="handoutAudioPlayer" class="w-0 h-0" :src="handoutAudio"></audio>

    <img class="w-20 h-20 rounded-full object-scale-down border ml-5" :src="curAvatar" alt="" />
    <div class="flex flex-col gap-2 overflow-hidden">
      <div
        class="font-medium text-gray-500 overflow-ellipsis whitespace-nowrap overflow-hidden cursor-default"
      >
        <span
          style="
            display: inline-block;
            max-width: 90px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: bottom;
          "
        >
          {{ curNickname }}
        </span>
        <span v-if="notifyType === 'video'">申请视频通话</span>
        <span v-if="notifyType === 'voice'">申请语音通话</span>
      </div>
      <div class="flex gap-5 justify-center">
        <div
          class="h-9 w-9 cursor-pointer border rounded-3xl flex justify-center items-center bg-green-500 hover:bg-green-300"
          title="接受接听"
          @click="acceptCall"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            class="w-7 h-7 fill-white"
          >
            <path
              d="M446.272 573.44a509.653333 509.653333 0 0 1-81.92-100.650667c67.786667-30.474667 112.138667-93.461333 112.138667-169.792C476.48 194.592 388.96 106.666667 280.906667 106.666667 170.058667 106.666667 85.333333 188.746667 85.333333 302.997333c0 158.250667 82.56 328.554667 200.618667 439.658667 100.010667 94.122667 258.986667 161.738667 413.461333 174.570667 0.832 0.074667 1.674667 0.106667 2.517334 0.106666h41.162666a30.517333 30.517333 0 0 0 0-61.045333h-39.872c-140.672-11.978667-286.026667-73.930667-375.456-158.090667-106.410667-100.16-181.408-254.837333-181.408-395.2 0-80.106667 56.981333-135.285333 134.549334-135.285333 74.282667 0 134.549333 60.533333 134.549333 135.285333 0 60.309333-40.896 107.989333-103.008 123.349334a30.517333 30.517333 0 0 0-19.786667 43.658666c27.573333 53.312 66.037333 104.426667 111.573334 147.690667 51.264 48.693333 109.941333 86.112 172.053333 108.16a30.506667 30.506667 0 0 0 40.362667-24.064c10.453333-67.093333 61.621333-114.026667 126.442666-114.026667 74.272 0 134.549333 60.544 134.549334 135.285334 0 25.578667-7.04 50.026667-20.149334 71.253333a30.528 30.528 0 0 0 51.925334 32.074667A196.096 196.096 0 0 0 938.666667 723.050667c0-108.394667-87.530667-196.330667-195.573334-196.330667-83.072 0-151.210667 52.384-177.621333 128.864-42.368-19.552-82.773333-47.541333-119.2-82.144z"
            ></path>
          </svg>
        </div>
        <div
          class="h-9 w-9 cursor-pointer border rounded-3xl flex justify-center items-center bg-red-500 hover:bg-red-300"
          title="拒绝接听"
          @click="refuseCall"
        >
          <svg
            viewBox="0 0 1024 1024"
            xmlns="http://www.w3.org/2000/svg"
            class="w-7 h-7 fill-white"
          >
            <path
              d="M446.272 573.44a509.653333 509.653333 0 0 1-81.92-100.650667c67.786667-30.474667 112.138667-93.461333 112.138667-169.792C476.48 194.592 388.96 106.666667 280.906667 106.666667 170.058667 106.666667 85.333333 188.746667 85.333333 302.997333c0 158.250667 82.56 328.554667 200.618667 439.658667 100.010667 94.122667 258.986667 161.738667 413.461333 174.570667 0.832 0.074667 1.674667 0.106667 2.517334 0.106666h41.162666a30.517333 30.517333 0 0 0 0-61.045333h-39.872c-140.672-11.978667-286.026667-73.930667-375.456-158.090667-106.410667-100.16-181.408-254.837333-181.408-395.2 0-80.106667 56.981333-135.285333 134.549334-135.285333 74.282667 0 134.549333 60.533333 134.549333 135.285333 0 60.309333-40.896 107.989333-103.008 123.349334a30.517333 30.517333 0 0 0-19.786667 43.658666c27.573333 53.312 66.037333 104.426667 111.573334 147.690667 51.264 48.693333 109.941333 86.112 172.053333 108.16a30.506667 30.506667 0 0 0 40.362667-24.064c10.453333-67.093333 61.621333-114.026667 126.442666-114.026667 74.272 0 134.549333 60.544 134.549334 135.285334 0 25.578667-7.04 50.026667-20.149334 71.253333a30.528 30.528 0 0 0 51.925334 32.074667A196.096 196.096 0 0 0 938.666667 723.050667c0-108.394667-87.530667-196.330667-195.573334-196.330667-83.072 0-151.210667 52.384-177.621333 128.864-42.368-19.552-82.773333-47.541333-119.2-82.144z"
            ></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
